<template>
  <div class="wrapper">
    <swiper ref="mySwiper" :options="swiperOptions">
      <swiper-slide v-for="(item,index) in swiperList" :key="index">
          <img class="swiper-image" :src="item.imgUrl"/>
      </swiper-slide>
      <div class="swiper-pagination" slot="pagination"></div>
    </swiper>
  </div>
</template>

<script>
export default {
  name: 'HomeSwiper',
  props: {
    swiperList: {
      type: Array
    }
  },
  data () {
    return {
      swiperOptions: {
        spaceBetween: 0, //  轮播图之间是否有空白
        autoplay: {//  自动轮播设置
          delay: 2000,
          disableOnInteraction: false
        },
        pagination: {//  是否可以通过点击来切换图片
          el: '.swiper-pagination',
          clickable: true
        },
        loop: true
      }
    }
  }
}
</script>

<style lang="stylus" scope>
  .wrapper
    overflow: hidden
    width: 100%
    height: 0
    padding-bottom: 56.2%
    background: #ccc
   .swiper-image
    width: 100%
   .swiper-pagination-bullet-active
    background: #FFD700
   .swiper >>> .swiper-pagination-bullet
    background: #FF1493
</style>
